
import { ComponentProps, Mut, VueComponent } from "vue3-oop";
import { Collapse,CollapsePanel,FormItem, InputNumber, Input, notification, RadioGroup,RadioButton, Select, SelectOption } from 'ant-design-vue';
import { FormData, WidgetItem } from '@/components/FormDesigner/types';
import { SWITCH,STATUS_OPTIONS } from './attr-switch'
import CfgBasic from '../_common/cfg-basic'
import CfgLayout from '../_common/cfg-layout'
import CfgFormitem from '../_common/cfg-formitem'
import CfgField from '../_common/cfg-field'

interface IProps {
  formData: FormData,
  widgetItem: WidgetItem
}
export default class CfgSwitch extends VueComponent<IProps> {
  static defaultProps: ComponentProps<IProps> = {
    formData: {},
    widgetItem: {}
  }

  @Mut() state = {
    layoutWinSize: this.props.formData.winSize,
    activePanel: ['BASIC','LAYOUT','SWITCH']
  }

  render(){
    const { formData,widgetItem } = this.props;
    const attr = widgetItem[widgetItem.type] as SWITCH

    return(
      <Collapse
        activeKey={this.state.activePanel}
        onChange={(newActiveKey)=>{this.state.activePanel = newActiveKey as string[]}}
      >
        <CollapsePanel header='基本属性' key='BASIC' >
          <CfgBasic widgetItem={widgetItem} />
        </CollapsePanel>
        <CollapsePanel header='布局属性' key='LAYOUT' >
          <CfgLayout formData={formData} widgetItem={widgetItem} />
          <FormItem label="默认状态">
            <Select value={attr.layout_status} onChange={(value)=>{attr.layout_status = value as any}}>
              {STATUS_OPTIONS.map((item)=>(<SelectOption value={item.value}>{item.label}</SelectOption>))}
            </Select>
          </FormItem>
        </CollapsePanel>
        <CollapsePanel header='开关属性' key='SWITCH' >
          <CfgFormitem widgetItem={widgetItem} />
          <CfgField widgetItem={widgetItem} />
        </CollapsePanel>
      </Collapse>
    )
  }
}